<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转魔方</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 500px;
			height: 500px;
			margin: 20px auto;
			perspective: 500px;
			perspective-origin:50% 50%;
		}
		.box{
			width: 200px;
			height: 200px;
			position: relative;
			margin: 100px auto 0;
			transform-style: preserve-3d;
			animation: mofang 5s infinite linear;
			
		}
		.box>div{
			width: 200px;
			height: 200px;
			font-size: 30px;
			text-align: center;
			line-height: 200px;
			position: absolute;
			background-color: rgba(250,80,150,0.5);
		}
		img{
			width: 200px;
			height: 200px;
		}
		.box1{
			transform: rotateX(90deg) translateZ(100px);
		}
		.box2{
			transform: rotateX(90deg) translateZ(-100px);
		}
		.box3{
			transform: rotateY(90deg) translateZ(-100px);
		}
		.box4{
			transform: rotateY(90deg) translateZ(100px);
		}
		.box5{
			transform:translateZ(-100px);
		}
		.box6{
			transform:translateZ(100px);
		}
		@keyframes mofang{
			0%{
				transform: rotateX(0deg) rotateY(0deg);
			}
			100%{
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">
		<div class="box1"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3465799489,1680452073&fm=26&gp=0.jpg"></div>
		<div class="box2"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1664219662,3822515643&fm=26&gp=0.jpg"></div>
		<div class="box3"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2106976626,2738008677&fm=26&gp=0.jpg"></div>
		<div class="box4"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2200940861,1331770162&fm=26&gp=0.jpg"></div>
		<div class="box5"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=183391930,2775957322&fm=26&gp=0.jpg"></div>
		<div class="box6"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3970739769,2154063864&fm=26&gp=0.jpg"></div>
		</div>
	</div>
</body>
</html>